<template>
	<gracePage statusBarBG="rgba(255,255,255,0)">
		<view slot="gHeader">
			<view class="grace-header-body">
				<!-- 返回按钮 -->
				<text class="grace-header-icons grace-icons icon-arrow-left" @tap="goBack"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex grace-h4 grace-bold grace-white grace-text-center">
					我要答题
				</view>
				<!-- 设置按钮 -->
				<view class="grace-white"></view>
			</view>
		</view>
		<view slot="gBody">
			<view class="grace-fixed-top help-bg">
				<view class="banner-bg">
					<text class="grace-paper-title">{{title}}</text>
				</view>
				<view class="grace-flex-center grace-paper-down">
					<text class="grace-paper-down-title">倒计时：</text>
					<graceCountDown :splitorText="[':',':','']" width="60rpx" fontColor="#FFFFFF" borderColor="#FF0036" bgrColor="#FF0036"
					 splitorColor="#FF0036" :timer="timer1" v-on:endDo="endDo()"></graceCountDown>
				</view>
				<view class="grace-body">
					<view class="help-body">
						<view class="grace-grids grace-box-shadow" style="margin-top:80rpx;">
							<graceFlex :classes="['row', 'space-between']">
								<view>
									<view class="grace-qn-type" v-if="currentType=='1'">单项选择题</view>
									<view class="grace-qn-type" v-if="currentType=='2'">多选选择题</view>
									<view class="grace-qn-type" v-if="currentType=='3'">判断选择题</view>
								</view>
								<view class="grace-bg-white">
									<image class="party-logo" src="../../static/img/common/partylogo.png"></image>
								</view>
								<view class="grace-qn-step">
									<text class="grace-h3 grace-red">{{currentQN+1}}</text><text class="grace-red">/{{qns.length}}</text>
								</view>
							</graceFlex>
							<form @submit="formSubmit" class="grace-form" style="margin-top:10rpx;">
								<swiper class="grace-qn-swiper" :current="currentQN" @change="swiperChange" :style="{height:swiperHeight+'px'}">
									<swiper-item v-for="(item, index) in qns" :key="index">
										<view class='grace-qn-in'>
											<view class="grace-form-item">
												<view class="grace-form-body">
													<view class="grace-qn-title">{{index+1}}、{{item.question}}</view>
												</view>
											</view>
											<view class="grace-form-item" v-if="item.timu_info.type == '1'">
												<view class="grace-form-body" style="padding:0 30rpx;">
													<radio-group :name="item.id+':1'" @change="checkedChange">
														<label class="grace-check-item" v-for="(answer, answerIndex) in item.selectdata" :key="answerIndex" style="margin:20px 0;">
															<radio :value="answer.key" :checked="false"></radio>{{answer.value}}
														</label>
													</radio-group>
												</view>
											</view>
											<view class="grace-form-item" v-if="item.timu_info.type == '2'">
												<view class="grace-form-body" style="padding:0 30rpx;">
													<checkbox-group :name="item.id+':2'" @change="checkedChange">
														<label class="grace-check-item" v-for="(answer, answerIndex) in item.selectdata" :key="answerIndex" style="margin:20px 0;">
															<checkbox :value="answer.key" :checked="false"></checkbox>{{answer.value}}
														</label>
													</checkbox-group>
												</view>
											</view>
											<view class="grace-form-item" v-if="item.timu_info.type == '3'">
												<view class="grace-form-body" style="padding:0 30rpx;">
													<radio-group :name="item.id+':3'" @change="checkedChange">
														<label class="grace-check-item" v-for="(answer, answerIndex) in item.selectdata" :key="answerIndex" style="margin:20px 0;">
															<radio :value="answer.key" :checked="false"></radio>{{answer.value}}
														</label>
													</radio-group>
												</view>
											</view>
										</view>
									</swiper-item>
								</swiper>
							</form>
						</view>
						<view class="help-foot">
							<graceFlex :classes="['row', 'space-between']">
								<view class="dj-button">
									<button type="warn" class="grace-button ur-qn-button" plain="true" @tap="prev()" v-if="currentQN > 0">上一题</button>
								</view>
								<view class="dj-button grace-bg-white"></view>
								<view class="dj-button grace-bg-white">
									<button type="warn" @tap="next()" class="grace-button ur-qn-button">
										<text v-if="currentQN + 1 < qns.length">下一题</text><text v-else>完成</text>
									</button>
								</view>
							</graceFlex>
						</view>
					</view>

				</view>
			</view>
		</view>
		<graceDialog :isTitle="false" :show="show" v-on:closeDialog="closeDialog">
			<view class="content2" slot="content">
				<text>我见过春日夏风秋叶冬雪，也踏遍南水北山东麓西岭，可这四季春秋 苍山泱水，都不及你冲我展眉一眺。</text>
			</view>
			<view slot="btns" class="grace-space-between">
				<text class="grace-dialog-buttons" @tap="closeDialog">关闭</text>
			</view>
		</graceDialog>
	</gracePage>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceFlex from "../../graceUI/components/graceFlex.vue";
	import graceHeader from '../../graceUI/components/graceHeader.vue';
	import graceCountDown from "../../graceUI/components/graceCountDown.vue";
	import graceDialog from '../../graceUI/components/graceDialog.vue';
	var graceChecker = require("../../graceUI/jsTools/graceChecker.js");
	var graceDate = require("../../graceUI/jsTools/date.js");
	export default {
		data() {
			return {
				currentQN: 0, // 当前题目
				swiperHeight: 350,
				id:0,
				examid: 0,
				title: '',
				hours: 0,
				timer1: '',
				qns: [], // 问卷数据
				values: '', //选择值
				show:false,
			};
		},
		computed: {
			currentType: function() {
				let currentType = '';
				if (this.qns.length > 0 && this.currentQN < this.qns.length ) {
					currentType = this.qns[this.currentQN].timu_info.type;
				}
				return currentType;
			}
		},
		components: {
			gracePage,
			graceFlex,
			graceHeader,
			graceCountDown,
			graceDialog
		},
		onLoad: function(options) {
			this.id = options.id;
			this.title = options.title;
			this.hours = options.hours;
			this.timer1 = graceDate.currentTime('str', 1000 * 60 * this.hours),
				this.getPager(this.id);
		},
		methods: {
			//退回
			goBack: function() {
				uni.navigateBack({});
			},
			//选项改变
			checkedChange: function(e) {
				this.values = e.target.value;
			},
			showDialog : function(){
				this.show = true;
			},
			closeDialog1 : function(){
				this.show = false;
			},
			// 查询答卷设计数据
			async getPager(id) {
				let data = await this.$apis.listExamQus({
					user_plan_id: id
				});
				let time = data.time;
				this.qns = data.questions;
				this.examid = data.user_exam_id;
				// this.qns = [{
				// 	id: 1,
				// 	question: '（ ）是改革开放以来党的全部理论和实践的主题，是党和人民历尽千辛万苦、付出巨大代价取得的根本成就。',
				// 	selectdata: [{
				// 			key: 'A',
				// 			value: "你知道吗"
				// 		},
				// 		{
				// 			key: 'B',
				// 			value: "只有你知道吗"
				// 		},
				// 		{
				// 			key: 'C',
				// 			value: "就你知道吗"
				// 		},
				// 		{
				// 			key: 'D',
				// 			value: "没有你知道吗"
				// 		},
				// 	],
				// 	timu_info: {
				// 		type: '1',
				// 	}
				// },{
				// 	id: 2,
				// 	question: '（ ）是改革开放以来党的全部理论和实践的主题，是党和人民历尽千辛万苦、付出巨大代价取得的根本成就。',
				// 	selectdata: [{
				// 			key: 'A',
				// 			value: "你知道吗"
				// 		},
				// 		{
				// 			key: 'B',
				// 			value: "只有你知道吗"
				// 		},
				// 		{
				// 			key: 'C',
				// 			value: "就你知道吗"
				// 		},
				// 		{
				// 			key: 'D',
				// 			value: "没有你知道吗"
				// 		},
				// 	],
				// 	timu_info: {
				// 		type: '2',
				// 	}
				// },{
				// 	id: 3,
				// 	question: '（ ）是改革开放以来党的全部理论和实践的主题，是党和人民历尽千辛万苦、付出巨大代价取得的根本成就。',
				// 	selectdata: [{
				// 			key: 'A',
				// 			value: "你知道吗"
				// 		},
				// 		{
				// 			key: 'B',
				// 			value: "只有你知道吗"
				// 		},
				// 		{
				// 			key: 'C',
				// 			value: "就你知道吗"
				// 		},
				// 		{
				// 			key: 'D',
				// 			value: "没有你知道吗"
				// 		},
				// 	],
				// 	timu_info: {
				// 		type: '2',
				// 	}
				// },{
				// 	id: 4,
				// 	question: '（ ）是改革开放以来党的全部理论和实践的主题，是党和人民历尽千辛万苦、付出巨大代价取得的根本成就。',
				// 	selectdata: [{
				// 			key: 'A',
				// 			value: "你知道吗"
				// 		},
				// 		{
				// 			key: 'B',
				// 			value: "只有你知道吗"
				// 		},
				// 	],
				// 	timu_info: {
				// 		type: '3',
				// 	}
				// }, ];
			},
			// 提交答题
			//user_exam_id 用户试卷id
			//timu_info 题目信息
			//user_answer 用户答案
			async submitQn() {
				let answer = this.values;
				if (answer == '') {
					uni.showToast({
						title: '请选择您的答案',
						icon: "none"
					});
					return;
				}

				if (answer instanceof Array) {
					answer = answer.join(',');
				}

				let timu_info = this.qns[this.currentQN].timu_info;
				let reqdata = {
					user_exam_id: this.examid,
					timu_info: timu_info,
					user_answer: answer
				};
				console.log(reqdata);
				let data = await this.$apis.submitExamQn(reqdata);
				if( this.isLastQn() ){
					uni.showToast({
						title: '您已完成答题，感谢您的配合',
						icon: "none",
						duration: 5000,
					});
					this.goBack();
				}
			},
			//最后一题
			isLastQn:function(){
				let last = this.currentQN +1 >= this.qns.length ? true : false;
				return last;
			},
			//重置选项值
			resetValues: function() {
				this.values = '';
			},
			endDo: function() {

			},
			swiperChange: function(e) {
				this.currentQN = e.detail.current;
				this.resetValues();
				// this.currentType = this.qns[this.currentQN].timu_info.type;
			},
			prev: function() {
				this.currentQN--;
				// this.currentType = this.qns[this.currentQN].timu_info.type;
			},
			next: function() {
				console.log(this.values);
				this.submitQn();
				this.currentQN++;

				// this.currentType = this.qns[this.currentQN].timu_info.type;
			},

		},
	}
</script>
<style>
	page {
		background-color: #F6F7F8;
	}

	.help-bg {
		height: 350rpx;
		background-image: url(../../static/img/common/partybj.png);
	}

	.banner-bg {
		margin-top: 120rpx;
		height: 80rpx;
		background-image: url(../../static/img/common/redbanner.png);
		color: #FFFFFF;
	}

	.ur-qn-button {
		width: 160rpx;
		height: 80rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.ur-qn-submit {
		height: 80rpx;
		font-weight: bold;
	}

	.help-body {
		/* 		width: 680rpx; */
		margin-left: 10rpx;
		margin-right: 10rpx;
		margin-top: -20rpx;
	}

	.help-foot {
		margin-left: 60rpx;
		margin-right: 60rpx;
		margin-top: 30rpx;
	}

	.grace-grids {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 10rpx 0;
	}

	.grace-grids-items {
		width: 160rpx;
	}

	.login-sendmsg-btn {
		height: 60rpx;
		width: 200rpx;
		flex-shrink: 0;
		margin-left: 30rpx;
		text-align: center;
		background-color: #ffffff;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.grace-pnper {
		width: 168rpx;
		flex-shrink: 0;
	}

	.grace-form-label {
		width: 168rpx;
	}

	.grace-form-input {
		text-align: left;
	}

	.grace-form-item {
		padding: 10rpx 0;
	}

	.grace-paper-title {
		padding-left: 30rpx;
		font-size: 32rpx;
		line-height: 40px;
		text-align: center;
	}

	.party-logo {
		height: 120rpx;
		width: 120rpx;
		margin-top: -60rpx;
		margin-left: 60rpx;
	}

	.grace-paper-down {
		margin-top: 10rpx;
	}

	.grace-paper-down-title {
		font-size: 36rpx;
		line-height: 60rpx;
		color: #FFFFFF;
	}

	.grace-qn-title {
		padding: 0 30rpx;
		line-height: 50rpx;
		font-size: 36rpx;
	}

	.grace-qn-type {
		margin-left: 40rpx;
		line-height: 60rpx;
		font-size: 40rpx;
	}

	.grace-qn-step {
		line-height: 30px;
		margin-left: 80px;
	}

	.grace-login-three-items {
		display: block;
		width: 88rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 60rpx;
		color: #3688FF;
		text-align: center;
		margin: 10rpx;
	}
</style>
